<template>
  <div ref="boxRef" class="popup-box full">
    <div v-if="slots.header" class="header flex items-center pl5px">
      <slot name="header"></slot>
    </div>
    <ElScrollbar class="content">
      <slot></slot>
    </ElScrollbar>
    <div v-if="slots.footer" class="footer flex-center">
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ElLoading, ElScrollbar } from 'element-plus'
  import { computed, ref, useSlots, watch } from 'vue';

  const slots = useSlots()

  const rows = computed(() => {
    const ret = []
    if(slots.header) ret.push('50px')
    ret.push('minmax(0, 1fr)')
    if(slots.footer) ret.push('41px')

    return ret.join(' ')
  })

  const areas = computed(() => {
    const ret = []
    if(slots.header) ret.push("'header'")
    ret.push("'content'")
    if(slots.footer) ret.push("'footer'")

    return ret.join(' ')
  })

  const props = defineProps<{loading?: boolean}>()
  const boxRef = ref()

  let loadingInstance
  watch(() => props.loading, (val) => {
    if(val) {
      loadingInstance = ElLoading.service({ target: boxRef.value })
    } else {
      loadingInstance?.close()
    }
  })
</script>
<style lang="less" scoped>
  .popup-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: v-bind(rows);
    grid-template-areas: v-bind(areas);
  }
  .header {
    grid-area: header;
    background-color: rgba(228, 129, 15, 0.116);
  }
  .content {
    grid-area: content;    
  }
  .footer {
    grid-area: footer;
    align-items: end;
  }
</style>
